@import './reset.scss';
@import './header.scss';
@import './footer.scss';

.container{
    width: 1200px;
    margin: 0 auto;
}
header{
    height: 64px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #3b3e40;
    .container{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo{
            display: block;
            color: #3b3e40;
            img{
                vertical-align: middle;
            }
            span{
                font-size: 18px;
                line-height: 24px;
            }
        }
        &>div{
            a:last-child{
                border: none;
            }
            a{
                padding: 0 20px;
                display: inline-block;
                height: 24px;
                line-height: 24px;
                border-right: 1px solid #ddd;
                &:hover{
                    color: #44a8f2
                }
            }
            
        }

        .users{
            position: relative;
            &:hover div{
                display: block;
            }
            a{
                border: none;
                cursor: pointer;
            }
            div{
                display: none;
                position: fixed;
                top: 0;
                right: 74px;
                width: 88px;
                height: 65px;
                background: #eee;
                p{
                    padding: 6px 16px;

                }
                a{
                    display: inline;
                    padding: 0;
                    color: #414141;
                    font-size: 14px;
                    &:hover{
                        color: #1897f2;
                        text-decoration: none;
                    }
                }
            }
        }
        .users a{
            font-size: 14px;
            &:hover{
                text-decoration: underline;
            }
        }
    }


}

.cart{
    .container{
        width: 1200px;
        padding: 24px 0 48px;
        h1{
            color: #3b3e40;
            font-size: 32px;
            line-height: 48px;
            font-weight: 500;
        }
        .msg{
            color: #3b3e40;
            font-size: 14px;
            line-height: 24px;
            margin: 8px 0;
            a{
                margin-left: 16px;
                color: #44a8f2;
                &:hover{
                    text-decoration: underline;
                }
            }
        }

        .cartNone{
            p{
                padding-top: 16px;
                text-align: right;
                span{
                    padding-left: 20px;
                    a{
                        color: #42b7ff;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        .shop{
            margin-top: 24px;
            font-size: 14px;
            .item{
                display: flex;
                line-height: 24px;
                font-size: 14px;
                div:first-child{
                    width: 700px;
                }
                div{
                    width: 150px;
                }
                input{
                    vertical-align: middle;
                    width: 17px;
                    height: 17px;
                }
            }
            

        }

        .line{
            height: 48px;
            position: relative;
            &::before{
                content: " ";
                position: absolute;
                left: 0;
                top: 50%;
                right: 0;
                height: 0;
                border-top: 1px solid #f0f1f2;
            }
        }

        .list{
            display: flex;
            align-items: center;
            box-sizing: border-box;
            .img{
                display: flex;
                align-items: center;

                input{
                    cursor: pointer;
                    width: 24px;
                    height: 24px;
                    border-color: #fff;
                    position: relative;
                }
                a{
                    display: block;
                    width: 128px;
                    height: 128px;
                    padding: 0 24px;
                    img{
                        width: 100%;
                    }
                }
            }

            .note{
                width: 500px;
                a{
                    font-size: 18px;
                    line-height: 28px;
                    color: #3b3e40;
                }
                p{
                    color: rgba(0,0,0,.65);
                    font-size: 12px;
                    line-height: 16px;
                }
            }

            .price,.num,.bigPrice{
                width: 150px;
            }

            .num{
                &>div{
                    height: 32px;
                    box-sizing: border-box;
                    line-height: 32px;
                    vertical-align: middle;
                    button:last-child{
                        border-left: 0px;
                        border-right: 1px solid #9fa3a6;

                    }
                    button{
                        background-color: #f7f9fa;
                        border: 1px solid #9fa3a6;
                        border-right: none;
                        width: 32px;
                        height: 100%;
                        line-height: 100%;
                        font-size: 12px;
                        outline: none;
                        float: left;
                        padding: 0;
                        font-size: 20px;
                        &:hover{
                            color: #44a8f2;
                        }
                    }
                    input{
                        background-color: #fff;
                        padding: 0;
                        border: none;
                        border: 1px solid #9fa3a6;
                        width: 40px;
                        text-align: center;
                        font-size: 14px;
                        line-height: 100%;
                        float: left;
                        height: 100%;
                        box-sizing: border-box;
                        cursor: not-allowed
                    }
                }
            }

            .btn{
                width: 50px;
                padding: 5px 0px;
                text-align: center;
                background-color: #cadee2;
                border-radius: 5px;
                color: #6e6e6e;
                font-size: 13px;
                cursor: pointer;
            }
        }

        .settlement{
            padding-top: 12px;
            display: flex;
            &>div{
                flex: 1;
            } 
            .left p{
                line-height: 16px;
                font-size: 14px;
                color: #85898c;
            }
            .right {
                font-size: 24px;
                line-height: 32px;
                margin-bottom: 16px;
                p{  
                    text-align: right;
                    span{
                        margin-left: 16px;
                    }
                }
                div{
                    color: #85898c;
                    text-align: right;
                    font-size: 14px;
                    line-height: 24px;
                    span{
                        margin-left: 8px;
                        color: #3b3e40;
                    }
                }
            }
        }

        .payment{
            height: 48px;
            a{
                display: block;
                float: right;
                height: 100%;
                color: #fff;
                width: 276px;
                text-align: center;
                line-height: 48px;
                font-size: 16px;
                background-color: #42b7ff;
                border-radius: 4px;
            }
        }
    }
}

.love{
    background-color: #f0f1f2;
    padding: 48px 0;
    h2{
        font-size: 28px;
        line-height: 40px;
        color: #3b3e40;
        font-weight: 500;
        margin-bottom: 16px;
    }
    .box{
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        &>a{
            display: block;
            width: 288px;
            height: 464px;
            position: relative;
            background-color: #fff;
            &>div{
                padding: 8px 24px;
                text-align: center;
                color: #3b3e40;
                p{
                    font-size: 18px;
                    line-height: 24px;
                    height: 48px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                span{
                    font-size: 14px;
                    line-height: 24px;
                    margin-top: 8px;
                }
                
            }
            img{
                height: 288px;
                display: block;
            }
            button{
                position: absolute;
                z-index: 10;
                left: 50%;
                bottom: 24px;
                transform: translateX(-50%);
                cursor: pointer;
                height: 2.5rem;
                padding: 0 1rem;
                font-size: 1rem;
                line-height: 1.5;
                border-radius: .25rem;
                color: #fff;
                background-color: #42b7ff;
                border: none;
                outline: none;
            }
        }
    }
}

.toMoney{
    display: none;
}